<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        ul{
            list-style: none;
        }
        #tabs li{
            background: #000000;
            color: #ffffff;
            width: 30px;
            height: 30px;
            margin-right: 5px;
            text-align: center;
            line-height: 30px;
            float: left;
            cursor:pointer;

        }
        #container{
            position:relative;
            width: 680px;
            height: 344px;
            margin: 50px auto;
        }
        #imgs img{
            display: none;
        }
        #imgs .selected{
            display: block;
        }
        #tabs{
            position: absolute;
            right: 20px;
            bottom: 20px;
        }
        #arrows{
            position: absolute;
            left: 20px;
            bottom: 20px;
        }
       #tabs .selected{
            background: orange;
            color: #ffffff;
           cursor:pointer;
        }
        #arrows span{
            float: left;
            background: #000000;
            color: #ffffff;
            width: 30px;
            height: 30px;
            margin-right: 5px;
            text-align: center;
            line-height: 30px;
            cursor:pointer;

        }
    </style>
</head>
<body>
<div id="container">
    <ul id="tabs">
        <li class="selected">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <div id="arrows">
    <span id="next">&lt;</span>
    <span id="prev">&gt;</span>
    </div>
    <div id="imgs">
        <img src="img/1.jpg" alt="" class="selected">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
    </div>
</div>
<script>
    var oContainer=document.getElementById('container')
    var otab=document.getElementById("tabs");
    var oImgs =document.getElementById("imgs");
    var aLi=otab.children;
    var aImgs =oImgs.children;
    var oNext=document.getElementById("next");
    var oPrev=document.getElementById("prev");
    var timer;
    var index=0;
    for(i=0;i<aLi.length;i++){
        aLi[i].index=i;
        aLi[i].onmouseover=function () {
            index=this.index;
            changeImg(this);
        }
    }
    for(i=0;i<aLi.length;i++){
        aImgs[i].index=i;
        aImgs[i].onmouseover=function () {
            index=this.index;
            changeImg(this);
        }
    }
    function changeImg(elem) {
        for(i=0;i<aLi.length;i++){
            aLi[i].className="";
            aImgs[i].className="";
        }
        elem.className='selected';
        aImgs[elem.index].className='selected';
    }
    oNext.onclick=function () {
        index--;
        if(index==-1){
            index=aLi.length-1;
        }
        changeImg(aLi[index]);
    }
    oPrev.onclick=function () {
        index++;
        if (index==aLi.length){
            index=0;
        }
        changeImg(aLi[index]);
    }
    function run() {
        timer =setInterval(function () {
            oPrev.onclick();
        },1000);
    };
    run();
    oContainer.onmouseover=function () {
        clearInterval(timer)

    };
    oContainer.onmouseout=function () {
        run()
    };
</script>
</body>
</html>






















































